<template>
  <div
    class="min-h-screen bg-gradient-to-br from-white to-gray-50 flex items-center justify-center relative overflow-hidden"
  >
    <!-- 背景装饰 -->
    <div class="absolute inset-0 z-0">
      <!-- <img
        :src="bgImage"
        alt="Background"
        class="w-full h-full object-cover opacity-10"
      /> -->
    </div>

    <div class="container mx-auto px-4 relative z-10">
      <div
        class="max-w-4xl mx-auto bg-white/80 backdrop-blur-sm rounded-xl shadow-2xl overflow-hidden"
      >
        <div class="flex flex-col md:flex-row">
          <!-- 左侧图片区域 -->
          <div class="md:w-1/2 relative">
            <!-- <img
              :src="sideImage"
              alt="Music"
              class="w-full h-full object-cover"
            /> -->
            <div
              class="absolute inset-0 bg-gradient-to-r from-purple-500/40 to-blue-500/40 flex items-center justify-center"
            >
              <h1 class="text-4xl font-bold text-white">初练音乐</h1>
            </div>
          </div>

          <!-- 右侧表单区域 -->
          <div class="md:w-1/2 p-8">
            <div class="space-y-6">
              <div class="text-center mb-8">
                <h2 v-if="isLogin" class="text-2xl font-bold">欢迎回来</h2>
                <h2 v-else class="text-2xl font-bold">创建账号</h2>
              </div>

              <!-- 登录表单 -->
              <div v-if="isLogin" class="space-y-4">
                <div class="space-y-2">
                  <el-input
                    v-model="loginForm.phone"
                    placeholder="手机号码"
                    :prefix-icon="Phone"
                  />
                </div>
                <div class="space-y-2">
                  <el-input
                    v-model="loginForm.password"
                    :type="showPassword ? 'text' : 'password'"
                    placeholder="密码"
                    :prefix-icon="Lock"
                  >
                    <template #suffix>
                      <el-icon
                        class="cursor-pointer"
                        @click="showPassword = !showPassword"
                      >
                        <View v-if="showPassword" />
                        <Hide v-else />
                      </el-icon>
                    </template>
                  </el-input>
                </div>
                <div class="flex items-center justify-between">
                  <el-checkbox v-model="loginForm.remember">记住我</el-checkbox>
                  <a
                    href="#"
                    class="text-purple-600 hover:text-purple-700 text-sm"
                    >忘记密码？</a
                  >
                </div>
                <el-button
                  type="primary"
                  class="w-full !rounded-button"
                  @click="handleLogin"
                  >登录</el-button
                >
                <div class="text-center text-sm text-gray-600">
                  还没有账号？
                  <a
                    href="#"
                    class="text-purple-600 hover:text-purple-700"
                    @click.prevent="toggleForm"
                    >立即注册</a
                  >
                </div>
              </div>

              <!-- 注册表单 -->
              <div v-else class="space-y-4">
                <div class="space-y-2">
                  <el-input
                    v-model="registerForm.username"
                    placeholder="用户昵称"
                    :prefix-icon="User"
                  />
                </div>
                <div class="space-y-2">
                  <el-input
                    v-model="registerForm.phone"
                    placeholder="手机号码"
                    :prefix-icon="Phone"
                  />
                </div>
                <div class="space-y-2">
                  <el-input
                    v-model="registerForm.smsCode"
                    placeholder="验证码"
                    :prefix-icon="Message"
                  />
                  <el-button class="ml-2" @click="sendSmsCode"
                    >发送验证码</el-button
                  >
                </div>
                <div class="space-y-2">
                  <el-input
                    v-model="registerForm.password"
                    :type="showPassword ? 'text' : 'password'"
                    placeholder="密码"
                    :prefix-icon="Lock"
                  >
                    <template #suffix>
                      <el-icon
                        class="cursor-pointer"
                        @click="showPassword = !showPassword"
                      >
                        <View v-if="showPassword" />
                        <Hide v-else />
                      </el-icon>
                    </template>
                  </el-input>
                </div>
                <div class="space-y-2">
                  <el-input
                    v-model="registerForm.confirmPassword"
                    :type="showPassword ? 'text' : 'password'"
                    placeholder="确认密码"
                    :prefix-icon="Lock"
                  />
                </div>
                <div class="flex items-center">
                  <el-checkbox v-model="registerForm.agreement"
                    >我已阅读并同意</el-checkbox
                  >
                  <a
                    href="#"
                    class="text-purple-600 hover:text-purple-700 text-sm ml-1"
                    >服务条款</a
                  >
                </div>
                <el-button
                  type="primary"
                  class="w-full !rounded-button"
                  @click="handleRegister"
                  >注册</el-button
                >
                <div class="text-center text-sm text-gray-600">
                  已有账号？
                  <a
                    href="#"
                    class="text-purple-600 hover:text-purple-700"
                    @click.prevent="toggleForm"
                    >直接登录</a
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { ElMessage } from 'element-plus';
  import { Phone, Lock, View, Hide, User } from '@element-plus/icons-vue';
  import { login } from '@/api';

  const router = useRouter();
  const isLogin = ref(true);
  const showPassword = ref(false);

  const loginForm = reactive({
    phone: 'duming',
    password: '123456',
    remember: false,
  });

  // const loginRules = {
  //   phone: [
  //     { required: true, message: '请输入手机号码', trigger: 'blur' },
  //     {
  //       pattern: /^1[3-9]\d{9}$/,
  //       message: '请输入正确的手机号码',
  //       trigger: 'blur',
  //     },
  //   ],
  //   password: [
  //     { required: true, message: '请输入密码', trigger: 'blur' },
  //     { min: 6, message: '密码长度不能小于6位', trigger: 'blur' },
  //   ],
  // };

  const handleLogin = async () => {
    try {
      const res = await login({
        username: loginForm.phone,
        password: loginForm.password,
      });

      if (res.code === 200) {
        localStorage.setItem('token', res.data.token);
        if (loginForm.remember) {
          localStorage.setItem('phone', loginForm.phone);
          localStorage.setItem('password', loginForm.password);
        } else {
          localStorage.removeItem('phone');
          localStorage.removeItem('password');
        }
        ElMessage.success('登录成功');
        router.push('/home');
      }
    } catch (error) {
      // console.error('登录失败:', error);
    }
  };

  const toggleForm = () => {
    router.push('/sign');
  };

  // 初始化表单数据
  onMounted(() => {
    if (localStorage.getItem('phone') && localStorage.getItem('password')) {
      loginForm.phone = localStorage.getItem('phone') || '';
      loginForm.password = localStorage.getItem('password') || '';
      loginForm.remember = true;
    }
  });
</script>

<style scoped>
  .el-input :deep(.el-input__wrapper) {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #e2e8f0;
    box-shadow: none;
  }

  .el-input :deep(.el-input__wrapper.is-focus) {
    border-color: #9333ea;
    box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.1);
  }

  .el-button--primary {
    background-color: #9333ea;
    border-color: #9333ea;
  }

  .el-button--primary:hover {
    background-color: #7e22ce;
    border-color: #7e22ce;
  }

  .el-select :deep(.el-input__wrapper) {
    background-color: rgba(255, 255, 255, 0.8);
  }

  .el-checkbox :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
    background-color: #9333ea;
    border-color: #9333ea;
  }

  .el-checkbox :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
    color: #9333ea;
  }
</style>
